<template lang="pug">
  .smallpicture
    ul(v-if='list')
        li(v-for='smallthumb in smallthumbs')
            router-link(to='/smallpicture')
             img(:src='list.smallthumb')
             p {{list.title+':&nbsp;'+list.content}}
</template>
<script>
export default {
  name: 'smallpicture',
  props: ['smallthumbs'],
  data() {
      return {
          url: 'https://www.easy-mock.com/mock/5a17dba3b23118413626a5d2/test/test3',
          list: null,
      }
  },
  created() {
      this.getPicture();
  },
  methods: {
    getPicture() {
      this.$http.get(this.url)
        .then((response) => {
          if (response) {
            console.log(response);
            this.list = response.data.list[0];
          } else {
            console.error('again');
            this.getPicture();
          }
        },(response) => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.smallpicture {
    width: $width;
    ul {
        @extend %flex;
        @extend %figure-box;
        li {
            position: relative;
            width: 18.75rem /* 300/16 */;
            height: 11.9375rem /* 191/16 */;
            p {
                height: $small;
                @extend %figure-caption;
                text-indent: 11px;
                line-height: $small;
            }
        }
    }
}
</style>

